<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>回单签收管理</title>
	<meta name="decorator" content="ani"/>
	<script type="text/javascript">
		var validateForm;
		var $table; // 父页面table表格id
		var $topIndex;//弹出窗口的 index
		function doSubmit(table, index){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $table = table;
			  $topIndex = index;
			  jp.loading();
			  $("#inputForm").submit();
			  return true;
		  }

		  return false;
		}

		$(document).ready(function() {
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					jp.post("${ctx}/tms/receipt/save",$('#inputForm').serialize(),function(data){
						if(data.success){

	                    	jp.success(data.msg);
	                    	jp.close($topIndex);//关闭dialog

                        }else{
            	  			jp.error(data.msg);
	                    }
					})
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

	        $('#clienteleSignTime').datetimepicker({
				 format: "YYYY-MM-DD HH:mm:ss"
		    });
	        $('#companySignTime').datetimepicker({
				 format: "YYYY-MM-DD HH:mm:ss"
		    });
	        $('#shipperSignTime').datetimepicker({
				 format: "YYYY-MM-DD HH:mm:ss"
		    });
		});
        function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));
            $(list+idx).find("select").each(function(){
                $(this).val($(this).attr("data-value"));
            });
            $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
                var ss = $(this).attr("data-value").split(',');
                for (var i=0; i<ss.length; i++){
                    if($(this).val() == ss[i]){
                        $(this).attr("checked","checked");
                    }
                }
            });
            $(list+idx).find(".form_datetime").each(function(){
                $(this).datetimepicker({
                    format: "YYYY-MM-DD HH:mm:ss"
                });
            });
        }
	</script>
</head>
<body class="bg-white">
<ul class="nav nav-tabs">
	<li class=""><a data-toggle="tab" href="#tab-01" aria-expanded="true">订单详情</a>
	</li>
	<li class=""><a data-toggle="tab" href="#tab-02" aria-expanded="true">服务信息</a>
	</li>
	<li class=""><a data-toggle="tab" href="#tab-03" aria-expanded="true">配载信息</a>
	</li>
	<li class=""><a data-toggle="tab" href="#tab-04" aria-expanded="true">费用信息</a>
	</li>
		<li class="active"><a data-toggle="tab" href="#tab-05" aria-expanded="true">回单签收</a>
		</li>

</ul>
<div class="tab-content">
<div id="tab-01" class="tab-pane fade ">
	<table class="table table-bordered">
		<tbody>
		<tr>
			<td width="10%"><label class="pull-right">装运单号：</label></td>
			<td width="23%">
				${tmsWaybill.shipmentNumbers}
			</td>
			<td width="10%"><label class="pull-right">下单日期：</label></td>
			<td width="23%">
				<fmt:formatDate value="${tmsWaybill.date}" pattern="yyyy-MM-dd HH:mm:ss"/>
			</td>
			<td width="10%"><label class="pull-right">要求发货时间：</label></td>
			<td width="23%">
				<fmt:formatDate value="${tmsWaybill.deliveryTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
			</td>
		</tr>
		<tr>

			<td class="width-10 active"><label class="pull-right">收货单位名称：</label></td>
			<td class="width-23">${tmsWaybill.unitName}
			</td>
			<td class="width-10 active"><label class="pull-right">收货单位确认人：</label></td>
			<td class="width-23">${tmsWaybill.unitConfirmor}
			</td>
			<td class="width-10 active"><label class="pull-right">确认人电话：</label></td>
			<td class="width-23">${tmsWaybill.phone}
			</td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">收货详细地址：</label></td>
			<td class="width-23">${tmsWaybill.site}
			</td>
			<td class="width-10 active"><label class="pull-right">到站省：</label></td>
			<td class="width-23">${tmsWaybill.arriveProvince}
			</td>
			<td class="width-10 active"><label class="pull-right">到站地城市：</label></td>
			<td class="width-23">${tmsWaybill.arriveCity}
			</td>
		</tr>
		<tr>

			<td class="width-10 active"><label class="pull-right">合同里程：</label></td>
			<td class="width-23">${tmsWaybill.distance}
			</td>
			<td class="width-10 active"><label class="pull-right">运输线路：</label></td>
			<td class="width-23">${tmsWaybill.transitLines}
			</td>
			<td class="width-10 active"><label class="pull-right">备注信息：</label></td>
			<td class="width-23">${tmsWaybill.remarks}
			</td>
		</tr></tbody></table>
	<div class="tabs-container">
		<ul class="nav nav-tabs">
			<li class="active"><a data-toggle="tab" href="#tab-2" aria-expanded="false">运单物料信息：</a>
			</li>
		</ul>
		<div class="tab-content">

			<div id="tab-2" class="tab-pane fade in active">
				<table class="table table-striped table-bordered table-condensed">
					<thead>
					<tr>
						<th class="hide"></th>
						<th>提货单号</th>
						<th>物料编码</th>
						<th>物料名称</th>
						<th>物料规格</th>
						<th>派车量</th>
						<th>装车量</th>
						<th>毛重</th>
						<th>体积</th>
						<th>提货仓库</th>
						<th>备注信息</th>
					</tr>
					</thead>
					<tbody id="tmsMaterialsInformationList">
					</tbody>
				</table>
				<script type="text/template" id="tmsMaterialsInformationTpl">//<!--
				<tr id="tmsMaterialsInformationList{{idx}}">


					<td>
						 {{row.number}}
					</td>


					<td>
                           {{row.coding}}
					</td>


					<td>
					{{row.name.name}}
					</td>


					<td>
                     {{row.specification}}
					</td>





					<td>
						{{row.vehicleQuantity}}
					</td>


					<td>
{{row.loadingQuantity}}
					</td>


					<td>
{{row.weight}}
					</td>


					<td>
{{row.volume}}
					</td>


					<td>
{{row.depot}}
					</td>


					<td>
{{row.remarks}}
					</td>


				</tr>//-->
				</script>
				<script type="text/javascript">
                    var tmsMaterialsInformationRowIdx = 0, tmsMaterialsInformationTpl = $("#tmsMaterialsInformationTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                    $(document).ready(function() {
                        var data = ${fns:toJson(tmsWaybill.tmsMaterialsInformationList)};
                        for (var i=0; i<data.length; i++){
                            addRow('#tmsMaterialsInformationList', tmsMaterialsInformationRowIdx, tmsMaterialsInformationTpl, data[i]);
                            tmsMaterialsInformationRowIdx = tmsMaterialsInformationRowIdx + 1;
                        }
                    });
				</script>
			</div>
		</div>
	</div>
</div>
<div id="tab-02" class="tab-pane fade">

	<table class="table table-bordered"><tbody>
	<tr>
		<td width="10%"><label class="pull-right">委托单号：</label></td>
		<td width="23%">${tmsWaybill.entrustNumber}
		</td>
		<td width="10%"><label class="pull-right">项目名称：</label></td>
		<td width="23%">${tmsWaybill.projectName}
		</td>
		<td width="10%"><label class="pull-right">委托单状态：</label></td>
		<td width="23%">${tmsWaybill.status}
		</td>
	</tr>
	<tr>
		<td class="width-10 active"><label class="pull-right">运输方式：</label></td>
		<td class="width-23">${tmsWaybill.transportMode}
		</td>
		<td class="width-10 active"><label class="pull-right">结算方式：</label></td>
		<td class="width-23">${tmsWaybill.clearingMode}
		</td>
		<td class="width-10 active"><label class="pull-right">结算类型：</label></td>
		<td class="width-23">${tmsWaybill.clearingType}
		</td>
	</tr>
	<tr>

		<td class="width-10 active"><label class="pull-right">合同运距：</label></td>
		<td class="width-23">${tmsWaybill.contractDistance}
		</td>
		<td class="width-10 active"><label class="pull-right">要求到货时间：</label></td>
		<td class="width-23"><fmt:formatDate value="${tmsWaybill.arrivalTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
		</td>
		<td class="width-10 active"><label class="pull-right">特点：</label></td>
		<td class="width-23">
			<sys:checkbox id="characteristic" name="characteristic" items="${fns:getDictList('td_characteristic')}" values="${tmsWaybill.characteristic}" cssClass="i-checks "/>
		</td>
	</tr>
	</tbody></table>
</div>
<div id="tab-03" class="tab-pane fade ">
	<table class="table table-bordered">
		<tbody>
		<tr>
			<td width="10%"><label class="pull-right">配载单号：</label></td>
			<td width="23%">${tmsWaybill.numbers}
			</td>
			<td width="10%"><label class="pull-right">配载日期：</label></td>
			<td width="23%">
				<fmt:formatDate value="${tmsWaybill.stowageDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
			</td>
			<td width="10%"><label class="pull-right">调度人员：</label></td>
			<td width="23%">${tmsWaybill.dispatchName.name}
			</td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">现场督导：</label></td>
			<td class="width-23">${tmsWaybill.guidance.name}
			</td>
			<td class="width-10 active"><label class="pull-right">托运类型：</label></td>
			<td class="width-23">${tmsWaybill.consign}
			</td>
			<td class="width-10 active"><label class="pull-right">预计到场时间：</label></td>
			<td class="width-23">${tmsWaybill.presentTime}
			</td>
		</tr>
		<%--<tr>--%>

		<%--<td class="width-15 active"><label class="pull-right">单据状态：</label></td>--%>
		<%--<td class="width-35">--%>
		<%--<form:input path="receiptsStatus" htmlEscape="false"    class="form-control "/>--%>
		<%--</td>--%>
		<%--</tr>--%>
		<tr>
			<td class="width-10 active"><label class="pull-right">承运商：</label></td>
			<td class="width-23">${tmsWaybill.commonCarrier}
			</td>
			<td class="width-10 active"><label class="pull-right">承运商联系人：</label></td>
			<td class="width-23">${tmsWaybill.contacts}
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">车牌号码：</label></td>
			<td class="width-23">${tmsWaybill.plateNumber}
			</td>
			<td class="width-10 active"><label class="pull-right">行驶证号：</label></td>
			<td class="width-23">${tmsWaybill.drivingLicense}
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">司机姓名：</label></td>
			<td class="width-23">${tmsWaybill.driverName}
			</td>
			<td class="width-10 active"><label class="pull-right">司机电话：</label></td>
			<td class="width-23">${tmsWaybill.driverPhone}
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">车辆类型：</label></td>
			<td class="width-23">${tmsWaybill.vehicleType}
			</td>
			<td class="width-10 active"><label class="pull-right">驾驶证号：</label></td>
			<td class="width-23">${tmsWaybill.driveNumber}
			</td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">提货流程：</label></td>
			<td class="width-89" colspan="5">${tmsWaybill.delivery}
			</td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">送货流程：</label></td>
			<td class="width-89" colspan="5">${tmsWaybill.gaveCommodity}
			</td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">注意事项：</label></td>
			<td class="width-89" colspan="5">${tmsWaybill.attention}
			</td>
		</tr>
		</tbody>
	</table>
</div>
<div id="tab-04" class="tab-pane fade ">
	<table class="table table-bordered">
		<tbody>
		<tr>
			<td width="10%"><label class="pull-right">收款人姓名：</label></td>
			<td width="23%">${tmsWaybill.payeeName}
			</td>
			<td width="10%"><label class="pull-right">卡号：</label></td>
			<td width="23%">${tmsWaybill.cardNumber}
			</td>
			<td width="10%"><label class="pull-right">开户行：</label></td>
			<td width="23%">${tmsWaybill.bankAddress}
			</td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">货到付款：</label></td>
			<td class="width-23">${tmsWaybill.kdPayment}
			</td>
			<td class="width-10 active"><label class="pull-right">支付方式：</label></td>
			<td class="width-23">${tmsWaybill.paymentWay}
			</td>
			<td class="width-10 active"><label class="pull-right">油卡卡号：</label></td>
			<td class="width-23">${tmsWaybill.paymentNumber}
			</td>
		</tr>
		<tr>

			<td class="width-10 active"><label class="pull-right">装货付款：</label></td>
			<td class="width-23">${tmsWaybill.loadingPayment}
			</td>
			<td class="width-10 active"><label class="pull-right">支付方式：</label></td>
			<td class="width-23">${tmsWaybill.loadingPaymentWay}
			</td>
			<td class="width-10 active"><label class="pull-right">油卡卡号：</label></td>
			<td class="width-23">${tmsWaybill.loadingCardNumber}
			</td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">凭回执结算：</label></td>
			<td class="width-23">${tmsWaybill.receiptCalculate}
			</td>
			<td class="width-10 active"><label class="pull-right">支付方式：</label></td>
			<td class="width-23">${tmsWaybill.receiptPayment}
			</td>
			<td class="width-10 active"><label class="pull-right">油卡卡号：</label></td>
			<td class="width-23">${tmsWaybill.receiptNumber}
			</td>
		</tr>
		<tr>

			<td class="width-10 active"><label class="pull-right">柴油及过路费合计：</label></td>
			<td class="width-23">${tmsWaybill.totalCost}
			</td>
			<td class="width-10 active"><label class="pull-right">租车费用：</label></td>
			<td class="width-23">${tmsWaybill.rentingCost}
			</td>
			<td class="width-10 active"><label class="pull-right">总运费：</label></td>
			<td class="width-23">${tmsWaybill.freight}
			</td>
		</tr>
		<tr>
			<td class="width-10 active"><label class="pull-right">本次发运单价：</label></td>
			<td class="width-23">${tmsWaybill.forwardingPrice}
			</td>
			<td class="width-10 active"><label class="pull-right">绩效运价：</label></td>
			<td class="width-23">${tmsWaybill.performancePrice}
			</td>
			<td class="width-10 active"><label class="pull-right">历史运价：</label></td>
			<td class="width-23">${tmsWaybill.historyPrice}
			</td>
		</tr>
		</tbody>
	</table>
	<div class="tabs-container">
		<ul class="nav nav-tabs">
			<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">运单附加费用：</a>
			</li>
		</ul>
		<div class="tab-content">
			<div id="tab-1" class="tab-pane fade in  active">
				<table class="table table-striped table-bordered table-condensed">
					<thead>
					<tr>
						<th class="hide"></th>
						<th>收支类型</th>
						<th>金额</th>
						<th>数量</th>
						<th>单价</th>
						<th>备注信息</th>
					</tr>
					</thead>
					<tbody id="tmsAdditionalChargeList">
					</tbody>
				</table>
				<script type="text/template" id="tmsAdditionalChargeTpl">//<!--
				<tr id="tmsAdditionalChargeList{{idx}}">
					<td class="hide">
						<input id="tmsAdditionalChargeList{{idx}}_id" name="tmsAdditionalChargeList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="tmsAdditionalChargeList{{idx}}_delFlag" name="tmsAdditionalChargeList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>

					<td>
{{row.balanceType}}
					</td>


					<td>
{{row.money}}
					</td>


					<td>
{{row.quantity}}
					</td>


					<td>
{{row.unitPrice}}
					</td>


					<td>
{{row.remarks}}
					</td>


				</tr>//-->
				</script>
				<script type="text/javascript">
                    var tmsAdditionalChargeRowIdx = 0, tmsAdditionalChargeTpl = $("#tmsAdditionalChargeTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                    $(document).ready(function() {
                        var data = ${fns:toJson(tmsWaybill.tmsAdditionalChargeList)};
                        for (var i=0; i<data.length; i++){
                            addRow('#tmsAdditionalChargeList', tmsAdditionalChargeRowIdx, tmsAdditionalChargeTpl, data[i]);
                            tmsAdditionalChargeRowIdx = tmsAdditionalChargeRowIdx + 1;
                        }
                    });
				</script>
			</div>

		</div>
	</div>
</div>
	<div id="tab-05" class="tab-pane fade in  active">
	<form:form id="inputForm" modelAttribute="receipt" action="${ctx}/tms/receipt/save" method="post"  class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<input type="hidden" id="bill" name="bill" value="${receipt.bill}">
		<table class="table table-bordered">
			<tbody>
			<tr>
				<th width="4%">序号</th>
				<th width="8%">节点名称</th>
				<th width="8%"><span style="color: red">*</span>签收状态</th>
				<th width="8%"><span style="color: red">*</span>签收人</th>
				<th width="8%">装车件数</th>
				<th width="8%"><span style="color: red">*</span>签收件数</th>
				<th width="8%">缺货量</th>
				<th width="16%"><span style="color: red">*</span>签收时间</th>
				<th>赔付说明</th>
				<th>备注</th>
			</tr>
			<tr>
				<th>1</th>
				<th><span style="color: red">*</span>客户签收</th>
				<td><select name="clienteleCollectState" class="form-control required">
					<option value="">请选择</option>
					<option vlaue="正常" <c:if test="${receipt.clienteleCollectState eq '正常'}">selected="selected"</c:if>>正常</option>
					<option value="异常" <c:if test="${receipt.clienteleCollectState eq '异常'}">selected="selected"</c:if>>异常</option>
				</select>
					</td>
				<td><form:input path="clienteleCollectName" htmlEscape="false"    class="form-control required"/></td>
				<td><form:input path="clienteleEntruckingNumber" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="clienteleSignNumber" htmlEscape="false"    class="form-control required"/></td>
				<td><form:input path="clienteleStockout" htmlEscape="false"    class="form-control "/></td>
				<td>
					<div class='input-group form_datetime' id='clienteleSignTime'>
						<input type='text'  name="clienteleSignTime" class="form-control required"  value="<fmt:formatDate value="${receipt.clienteleSignTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
						<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
					</div>
				</td>
				<td><form:input path="clienteleCompensate" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="clienteleRemarks" htmlEscape="false"    class="form-control "/></td>
			</tr>
			<tr>
				<th>2</th>
				<th>到公司</th>
				<td>
					<select name="companyCollectState" class="form-control ">
						<option value="">请选择</option>
						<option vlaue="正常" <c:if test="${receipt.companyCollectState eq '正常'}">selected="selected"</c:if>>正常</option>
						<option value="异常" <c:if test="${receipt.companyCollectState eq '异常'}">selected="selected"</c:if>>异常</option>
					</select>
				<td><form:input path="companyCollectName" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="companyEntruckingNumber" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="companySignNumber" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="companyStockout" htmlEscape="false"    class="form-control "/></td>
				<td>
					<div class='input-group form_datetime' id='companySignTime'>
						<input type='text'  name="companySignTime" class="form-control"  value="<fmt:formatDate value="${receipt.companySignTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
						<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
					</div>
				</td>
				<td><form:input path="companyCompensate" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="companyRemarks" htmlEscape="false"    class="form-control "/></td>
			</tr>
			<tr>
				<th>3</th>
				<th>到货主</th>
				<td><select name="shipperCollectState" class="form-control ">
					<option value="">请选择</option>
					<option vlaue="正常" <c:if test="${receipt.shipperCollectState eq '正常'}">selected="selected"</c:if>>正常</option>
					<option value="异常" <c:if test="${receipt.shipperCollectState eq '异常'}">selected="selected"</c:if>>异常</option>
				</select>
				<td><form:input path="shipperCollectName" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="shipperEntruckingNumber" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="shipperSignNumber" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="shipperStockout" htmlEscape="false"    class="form-control "/></td>
				<td>
					<div class='input-group form_datetime' id='shipperSignTime'>
						<input type='text'  name="shipperSignTime" class="form-control"  value="<fmt:formatDate value="${receipt.shipperSignTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
						<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
					</div>
				</td>
				<td><form:input path="shipperCompensate" htmlEscape="false"    class="form-control "/></td>
				<td><form:input path="remarks" htmlEscape="false"     class="form-control "/></td>
			</tr>


			</tbody>
		</table>
	</form:form>
</div>
	</div>
</body>
</html>